<template>
	
		
			<!-- <view class="status_bar">
			          
			</view>
			<view class="box-bg">
				<uni-nav-bar  shadow left-icon="left" leftText="返回" rightText="添加好友" title="好友列表" @clickLeft="topLeftClick()" @clickRight="topRightClick()" />
			</view> -->
			
				<uni-search-bar placeholder="请输入用户昵称或用户名" @confirm="search" @cancel="cancel" cancel-text="取消">
							<template v-slot:searchIcon>
								<uni-icons  color="#999999" size="18" type="search" />
							</template>
						</uni-search-bar>
					
				
	
			<uni-list :border="true" v-for="item in friendList"  >
			<!-- 头像显示圆点 -->
				<uni-list-chat :avatar="imageUrl+item.friendPortrait" :title="item.friendNickName" clickable @click="clickChat(item)" v-if="item.status==0" note="好友请求已发出,等待对方同意" badge-positon="left" ></uni-list-chat>
				<uni-list-chat :avatar="imageUrl+item.friendPortrait" :title="item.friendNickName" clickable @click="clickChat(item)"  v-if="item.status==1" note="15111111111" badge-positon="left"  ></uni-list-chat>
				<uni-list-chat :avatar="imageUrl+item.friendPortrait"  :title="item.friendNickName" clickable @click="clickChat(item)"  v-if="item.status==2" note="对方拒绝了你的好友申请" badge-positon="left"  ></uni-list-chat>
				
				
				
			<!-- 	<uni-list-chat title="柯南" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="葫芦娃" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="王嘚嘚" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="刘嘚嘚" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="图里里" avatar="../../static/pig.pngg" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="奶酪" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="脱落" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				 -->
				
				<!-- 自定义右侧内容 -->
				
			<!-- 	<uni-list-chat title="群分享" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
					<view class="chat-custom-right">
						<text class="chat-custom-text">刚刚</text>
						
						<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
					</view>
				</uni-list-chat> -->
			</uni-list>
	
		
		
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"  mode="input" title="添加好友"  
					placeholder="请输入好友手机号" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
				
		
</template>

<script>
	import constant from '@/store/constant.js'
	
	const baseImageUrl=constant.baseImageUrl;
	import store from '@/store/index.js';//需要引入store
	export default {
		computed:{
			friendList(){
				return store.state.friend.friendList
			},
			unfriendList(){
				return store.state.friend.unfriendList
			},
			
			toolsContent(){
				return store.state.common.toolsContent
			},
		},
		components: {},
		onLoad() {
			//加载新闻通知数据
			store.dispatch('loadFriendData',{})
			// uni.startPullDownRefresh();
			store.dispatch('loadUnfriendData',{})
			
		},
		data() {
			return {
				imageUrl:baseImageUrl,
				
				avatarList: [{
					url: '../../static/pig.png'
				}, {
					url: '../../static/pig.png'
				}, {
					url: '../../static/pig.png'
				}],
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				
			}
		},
		methods: {
			jumpUnfriend(){
				uni.navigateTo({
					url:"/pages/friend/unfriend"
				})
			},
			clickChat(item){
				switch(item.status){
					case 1:
						uni.navigateTo({
							url:"/pages/friend/friendContent?friendId="+item.friendId
						})
						break;
					default:
						uni.showToast({
							icon: 'none',
							title: "当前好友状态不支持查看" 
						})
						break;
				}
				
			},
			trigger(e) {
				
				
				this.toolsContent[e.index].active = !e.item.active
				store.dispatch('toolsJump',e.item.value)
			},
			topLeftClick(){
				uni.navigateTo({
					url:"/"
				})
			},
			topRightClick(){
				this.$refs.inputDialog.open()
				
				
			},
			dialogInputConfirm(value){
				
				if(value.length>0){
					console.log("---:"+value)
					var data={
						"friendUserName":value
					}
					store.dispatch('addFriendData',data).then(()=>{
						
						uni.showToast({
							icon: 'none',
							title: "好友申请已发出,请等待对方同意" 
						})
					});
				}else{
					uni.showToast({
						icon: 'none',
						title: "请输入好友手机号" 
					})
					
					
				}
				
				
			}
		}
	}
</script>

<style>
	/* $nav-height: 30px; */
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
		.box-bg {
			background-color: #F5F5F5;
			padding: 5px 0;
		}
	
		.city {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			/* // width: 160rpx; */
			margin-left: 4px;
		}
	
		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			/* // width: 500rpx; */
			flex: 1;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;
		}
	
		.input-uni-icon {
			line-height: $nav-height;
		}
	
		.nav-bar-input {
			height: $nav-height;
			line-height: $nav-height;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 12px;
			background-color: #f8f8f8;
		}
</style>